<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.18rem;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content">
      <h3 style="font-size: 0.25rem">员工入场三级安全教育登记表</h3>
      <div class="people-top mt-3">
        <div>项目名称：盐宜铁路站前施工10标项目</div>
        <div style="display: flex; align-items: center">劳务公司：<el-input v-model="threeEduForm.company" class="width-250 border_bottom_1" placeholder=" "></el-input></div>
      </div>
      <div class="table-form">
        <el-form ref="dataForm" :model="threeEduForm" label-width="138px" class="dataForm">
          <el-row>
            <el-row style="width: 100%">
              <el-col :span="24">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="姓名" prop="memberId" class="formItemDuty" style="border-top: 0px">
                      <el-input v-model="threeEduForm.name" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="性别" prop="" class="formItemDuty" style="border-top: 0px">
                      <el-input v-model="threeEduForm.sex" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="身份证号" prop="" class="formItemDuty" style="border-top: 0px">
                      <el-input v-model="threeEduForm.idCard" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="建卡时间" prop="" class="formItemDuty">
                      <el-input v-model="threeEduForm.cardTime" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="退场时间" prop="" class="formItemDuty">
                      <el-input v-model="threeEduForm.exitTime" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="联系电话" prop="" class="formItemDuty">
                      <el-input v-model="threeEduForm.phone" class="formItemDutyIn" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row style="border-bottom: 1px solid; border-top: 1px solid #000">
                  <el-col :span="15" style="border-right: 1px solid; font-size: 0.18rem; height: 0.25rem; line-height: 0.25rem"> 三级安全教育内容 </el-col>
                  <el-col :span="9"> 三级教育实施情况 </el-col>
                </el-row>
                <el-row style="border-bottom: 1px solid">
                  <el-col :span="2" class="education-title px-2" style="writing-mode: inherit; letter-spacing: 0"> 公 <br />司 <br />级 <br />教 <br />育 </el-col>
                  <el-col :span="13" style="border-right: 1px solid">
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">1.国家、省市及有关部门制定的安全生产方针、政策、法规、标准、规程。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">2.安全生产基本知识。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">3.本单位安全生产情况及安全生产规章制度和劳动纪律。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">4.从业人员安全生产权利和义务。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">5.有关事故案例。</div>
                  </el-col>
                  <el-col :span="9">
                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="font-size: 0.18rem; height: 0.5rem; line-height: 0.5rem"> 教育人（签字） </el-col>

                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1">签名：</div> -->
                        <el-image class="sign_img" v-show="threeEduForm.cepSign" :src="threeEduForm.cepSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>

                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="height: 0.5rem; line-height: 0.5rem; font-size: 0.18rem" @click="setUpEquipment('threeEduForm.ceiSign','TaskSignFinger')"> 受教育人（签字） </el-col>
                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1" >签名：</div> -->

                        <el-image class="sign_img" v-show="threeEduForm.ceiSign" :src="threeEduForm.ceiSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="font-size: 0.18rem">
                        接受教育（15）课时
                        <el-input v-model="threeEduForm.cyear" class="people-input" placeholder=" " style="width: 0.7rem"></el-input> 年 <el-input v-model="threeEduForm.cmonth" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 月 <el-input v-model="threeEduForm.cday" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 日
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>

                <el-row style="border-bottom: 1px solid">
                  <el-col :span="2" class="education-title px-2" style="writing-mode: inherit; letter-spacing: 0"> 项 <br />目 <br />部 <br />级 <br />教 <br />育 </el-col>
                  <el-col :span="13" style="border-right: 1px solid">
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">1.本项目工作环境、工程特点及危险因素。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">2.所从事工种可能遭受的职业伤害和伤亡事故。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">3.所从事工种的安全职责、操作技能及强制标准。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">4.安全设备设施的使用及维护。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">5.施工现场劳动纪律及安全注意事项。</div>
                  </el-col>
                  <el-col :span="9">
                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="font-size: 0.18rem; height: 0.5rem; line-height: 0.5rem"> 教育人（签字） </el-col>

                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1">签名：</div> -->
                        <el-image class="sign_img" v-show="threeEduForm.pepSign" :src="threeEduForm.pepSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>

                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="height: 0.5rem; line-height: 0.5rem; font-size: 0.18rem" @click="setUpEquipment('threeEduForm.peiSign','TaskSignFinger')"> 受教育人（签字） </el-col>
                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1">签名：</div> -->

                        <el-image class="sign_img" v-show="threeEduForm.peiSign" :src="threeEduForm.peiSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="font-size: 0.18rem">
                        接受教育（15）课时
                        <el-input v-model="threeEduForm.pyear" class="people-input" placeholder=" " style="width: 0.7rem"></el-input> 年 <el-input v-model="threeEduForm.pmonth" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 月 <el-input v-model="threeEduForm.pday" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 日
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>

                <el-row style="border-bottom: 1px solid">
                  <el-col :span="2" class="education-title px-2" style="writing-mode: inherit; letter-spacing: 0"> 班 <br />组 <br />级 <br />教 <br />育 </el-col>
                  <el-col :span="13" style="border-right: 1px solid">
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">1.个人防护用品的安全使用规则。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">2.相关工种的安全操作规程。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">3.班组活动制度及纪律。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">4.班组安全生产基本要求。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">5.岗位之间工作衔接配合的安全注意事项。</div>
                    <div style="text-align: left; margin: 0.1rem; font-size: 0.18rem">6.其他需要培训的内容。</div>
                  </el-col>
                  <el-col :span="9">
                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="font-size: 0.18rem; height: 0.5rem; line-height: 0.5rem"> 教育人（签字） </el-col>

                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1" >签名：</div> -->
                        <el-image class="sign_img" v-show="threeEduForm.tepSign" :src="threeEduForm.tepSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>

                    <el-row style="border-bottom: 1px solid">
                      <el-col :span="12" style="height: 0.5rem; line-height: 0.5rem; font-size: 0.18rem" @click="setUpEquipment('threeEduForm.teiSign','TaskSignFinger')"> 受教育人（签字） </el-col>
                      <el-col :span="12" style="border-left: 1px solid; height: 1.4rem" class="flex">
                        <!-- <div class="text-left ml-1" >签名：</div> -->

                        <el-image class="sign_img" v-show="threeEduForm.teiSign" :src="threeEduForm.teiSign" fit="fill"></el-image>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="font-size: 0.18rem">
                        接受教育（20）课时
                        <el-input v-model="threeEduForm.tyear" class="people-input" placeholder=" " style="width: 0.7rem"></el-input> 年 <el-input v-model="threeEduForm.tmonth" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 月 <el-input v-model="threeEduForm.tday" class="people-input" placeholder=" " style="width: 0.5rem"></el-input> 日
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const threeEduForm = ref({
            company: "", //劳务公司
            name: "",
            sex: "",
            idCard: "",
            cardTime: "", // 建卡时间
            exitTime: "", // 退卡时间
            phone: "",
            cepSign: "", // 教育人
            ceiSign: "", // 受教育人
            cyear: "",
            cmonth: "",
            cday: "",
            pepSign: "",
            peiSign: "",
            pyear: "",
            pmonth: "",
            pday: "",
            tepSign: "",
            teiSign: "",
            tyear: "",
            tmonth: "",
            tday: "",
          });

          window.setSign = (event) => {
            threeEduForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return threeEduForm.value;
          };
          window.setData = (data) => {
            threeEduForm.value.company = data.laborName;
            threeEduForm.value.name = data.name;
            threeEduForm.value.sex = data.sexName;
            threeEduForm.value.idCard = data.idCard;
            threeEduForm.value.phone = data.phone;
            // threeEduForm.value.cyear = data.year;
            // threeEduForm.value.cmonth = data.month;
            // threeEduForm.value.cday = data.day;
            threeEduForm.value.pyear = data.year;
            threeEduForm.value.pmonth = data.month;
            threeEduForm.value.pday = data.day;
            threeEduForm.value.tyear = data.year;
            threeEduForm.value.tmonth = data.month;
            threeEduForm.value.tday = data.day;

            threeEduForm.value.cepSign =
              "";
            threeEduForm.value.pepSign =
              "";

            threeEduForm.value.tepSign =
              "";
            // 建卡时间  当天-6
            const today = new Date();
            // 复制日期对象以避免修改原始日期
            const pastDate = new Date(today);
            // 减去6天
            pastDate.setDate(today.getDate() - 6);
            const year = pastDate.getFullYear();
            const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需+1并补零
            const day = String(pastDate.getDate()).padStart(2, "0"); // 日期补零

            threeEduForm.value.cardTime = `${year}-${month}-${day}`;
            // 公司级 当天-5
            const cpastDate = new Date(today);
            cpastDate.setDate(today.getDate() - 5);
            threeEduForm.value.cyear = cpastDate.getFullYear().toString();
            threeEduForm.value.cmonth = String(cpastDate.getMonth() + 1).padStart(2, "0");
            threeEduForm.value.cday = String(cpastDate.getDate()).padStart(2, "0");
            // 项目级 当天-3
            const ppastDate = new Date(today);
            ppastDate.setDate(today.getDate() - 3);
            threeEduForm.value.pyear = ppastDate.getFullYear().toString();
            threeEduForm.value.pmonth = String(ppastDate.getMonth() + 1).padStart(2, "0");
            threeEduForm.value.pday = String(ppastDate.getDate()).padStart(2, "0");
            // 班组级 当天
            threeEduForm.value.tyear = today.getFullYear().toString();
            threeEduForm.value.tmonth = String(today.getMonth() + 1).padStart(2, "0");
            threeEduForm.value.tday = String(today.getDate()).padStart(2, "0");
          };
          const onInput = (e, key) => {
            window.parent.postMessage(
              {
                key,
                isFill: e != "",
                form: "threeEduForm",
              },
              "*"
            );
          };
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            threeEduForm,
            setUpEquipment,
            onInput,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
